<template>
	<view class="work-calendar">
		<view class="date-change">
			<view @click="changeMonth(-1)"><uni-icons type="back" color="#0091FF"></uni-icons></view>

			<view class="date" @click="selectMonth">
				<view>{{ year }}年{{ month }}月</view>
				<view class="tag" v-if="nowDate.year == year && nowDate.month == month">本月</view>
			</view>
			<view @click="changeMonth(1)"><uni-icons type="forward" color="#0091FF"></uni-icons></view>
		</view>
		<view class="work-calendar-content">
			<view class="weeks">
				<view class="weeks-item" v-for="item in weeks" :key="item">{{ item }}</view>
			</view>
			<view v-for="(data, index) in Month" :key="index" class="month">
				<view
					:style="item.out ? 'background: #f4f4f4' : ''"
					v-for="(item, idx) of data"
					:key="idx"
					:class="['day', selectDate.day == item.date && selectDate.year == year && selectDate.month == month ? '' : '']"
					@click="select(item)"
				>
					<view class="day-info">
						<view :class="selectDate.day == item.date && selectDate.year == year && selectDate.month == month ? 'act-num' : 'day-num'">
							<view class="text">{{ item.date }}</view>
						</view>
						<view class="rest" v-if="item.order && item.order.holiday">休</view>
					</view>
					<!-- <view class="tag err">
						有任务
					</view> -->
					<block v-if="(item.order.holiday&&item.order.orderCount)||!item.order.holiday">
						<view class="tag info" v-if="item.date && !item.out && !item.order.orderCount && !item.order.isPlan">无任务</view>
						<view class="tag err" v-if="item.date && !item.out && !item.order.orderCount && item.order.isPlan"
						@click="lookTasks(item)">
							<text style="font-size: 20rpx;">有任务</text>
							<uni-icons color="#e02020" size="14rpx" type="forward"></uni-icons>
						</view>
						<view
							class="count"
							:style="!item.order.orderCount ? (item.order.isPlan ? 'color:#E02020' : 'color:#999999') : ''"
							v-if="item.date && users.length == 0 && (!item.out || item.order.orderCount)"
						>
							{{ item.order.orderCount || 0 }}
							<text style="padding-top: 3rpx;">单</text>
						</view>
						<view
							class="count"
							:style="!item.order.orderCount ? (item.order.isPlan ? 'color:#E02020' : 'color:#999999') : ''"
							v-if="item.date && users.length > 0 && (!item.out || item.order.userCount)"
						>
							{{ item.order.userCount || 0 }}
							<text style="padding-top: 3rpx;">人</text>
						</view>
						<view
							class="count"
							:style="!item.order.orderCount ? (item.order.isPlan ? 'color:#E02020' : 'color:#999999') : ''"
							v-if="item.date && users.length > 0 && !item.out && item.order.orderCount"
						>
							{{ item.order.orderCount || 0 }}
							<text style="padding-top: 3rpx;">单</text>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 日历 日周月组件 -->
		<weekYearDate ref="weekYear" :dateCurr="3" @selectChange="selectChange" />
	</view>
</template>

<script>
import weekYearDate from '@/components/weekYearDate/weekYearDate.vue';
export default {
	name: 'work-calendar',
	components: { weekYearDate },
	props: {
		users: {
			type: Array,
			default: () => {
				return [];
			}
		},
		orders: {
			type: Array,
			default: () => {
				return [];
			}
		},
		checkedDate:{
			type:Object,
			default:()=>{
				return {};
			}
		}
	},
	data() {
		return {
			Month: [],
			year: '',
			month: '',
			nowDate: {
				year: '',
				month: '',
				day: ''
			},
			selectDate: {
				// 选择的日期
				year: '',
				month: '',
				day: ''
			},
			weeks: ['一', '二', '三', '四', '五', '六', '日']
		};
	},
	watch: {
		orders(val) {
			this.getDate(this.year, this.month);
		}
	},
	created() {
		if (this.checkedDate && this.checkedDate.year) {
		 let date = new Date();
		 const year = date.getFullYear();
		 const month = date.getMonth() + 1;
		 const day = date.getDate();
			this.nowDate.year = year;
			this.year = this.checkedDate.year;
			this.nowDate.month = month;
			this.month = this.checkedDate.month;
			this.nowDate.day = day;
			this.selectDate = {
				year: this.year,
				month: this.month,
				day: this.checkedDate.day
			};
			console.log(this.nowDate,this.selectDate,6666);
		} else {
			let date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			this.nowDate.year = year;
			this.year = year;
			this.nowDate.month = month;
			this.month = month;
			this.nowDate.day = day;
			this.selectDate = {
				year: this.year,
				month: this.month,
				day: day
			};
		}
		
		this.getDate(this.year, this.month);
	},
	methods: {
		// 查看任务
		lookTasks(item) {
			console.log(item,'work');
			this.$emit('work',item);
		},
		// 自定义月份
		selectChange(res) {
			console.log(res);
			if (res) {
				let arr = res.split('/');
				this.year = Number(arr[0]);
				this.month = Number(arr[1]);
				this.getDate(this.year, this.month);
				this.$emit('changeMonth', { year: this.year, month: this.month });
			}
		},
		selectMonth() {
			this.$refs.weekYear.$refs.popup.open();
		},
		isActive(val) {
			// if (val != '') {
			// 	let date = new Date(this.year + '/' + this.month + '/' + val);
			// 	if (this.time.length == 2) {
			// 		// return this.time.indexOf(date.getTime())
			// 		this.show = true;
			// 	}
			// 	return this.time.indexOf(date.getTime()) != -1;
			// }
			return false;
		},
		select(item) {
			if (item.out || !item.date) {
				return;
			}
			this.selectDate = {
				year: this.year,
				month: this.month,
				day: item.date
			};
			this.$emit('setDateInfo',item);
			this.$emit('select', this.selectDate);
		},
		// 切换月份
		changeMonth(num) {
			if (num > 0) {
				if (this.month == this.nowDate.month && this.year == this.nowDate.year) {
					uni.showToast({
						title:'月份无法切换大于今月',
						icon:'none'
					});
					return;
				}
				if (this.month < 12) {
					this.month = Number(this.month) + num;
				} else {
					this.month = 1;
					this.year++;
				}
			} else {
				if (this.month == 1) {
					this.month = 12;
					this.year--;
				} else {
					this.month = Number(this.month) + num;
				}
			}
			this.getDate(this.year, this.month);
			this.$emit('changeMonth', { year: this.year, month: this.month });
		},
		// 计算每个月的天数以及显示
		getDate(year, month) {
			let week = [];
			this.Month = [];
			var nowDate = new Date(year, month, 0);

			let currentYear = nowDate.getFullYear();
			let nextYear = nowDate.getFullYear() + 1;
			let lastYear = nowDate.getFullYear() - 1;

			let nextDate = new Date(currentYear, nowDate.getMonth() + 1, 0);
			let oldDate = new Date(currentYear, nowDate.getMonth(), 0);

			if (nowDate.getMonth() == 1) {
				nextDate = new Date(currentYear, nowDate.getMonth() + 1, 0);
				oldDate = new Date(lastYear, 11, 0);
			} else if (nowDate.getMonth() == 12) {
				nextDate = new Date(nextYear, 0, 0);
				oldDate = new Date(currentYear, nowDate.getMonth(), 0);
			}

			let lastMonthDay = oldDate.getDate();

			let totalDays = nowDate.getDate();

			let monthHead = new Date(nowDate.setDate(1)).getDay() - 1 == -1 ? 6 : new Date(nowDate.setDate(1)).getDay() - 1;
			let monthTail = 7 - new Date(nowDate.setDate(totalDays)).getDay();
			// let monthDays=date.getDate()
			//
			for (let count = 1; count <= 7; count++) {
				if (monthHead > 0) {
					week.push({
						order: {},
						date: '',
						currentMonth: false
					});
					monthHead--;
				} else {
					break;
				}
			}
			// const today=(this.nowData.year+''+this.nowData.month)
			for (let count = 1; totalDays >= count; count++) {
				let order = {};
				if (this.orders.length && this.orders[count - 1]) {
					order = this.orders[count - 1];
				}
				const item = {
					order,
					date: count,
					currentMonth: true,
				
					out: this.nowDate.year < year || (this.nowDate.year == year && this.nowDate.month < month) || (this.nowDate.year == year && this.nowDate.month == month && this.nowDate.day < count),
					// outToday:today<=(year+''+month)&&this.nowData.day<=count,//是否大于等于今天
					today: year == this.nowDate.year && month == this.nowDate.month && count == this.nowDate.day ? true : false
				};
				
				if (this.checkedDate.year) {
					const temp = year == this.selectDate.year && month == this.selectDate.month && count == this.selectDate.day ? true : false;
					if (temp) {
						 this.$emit('setDateInfo',item);
					}
				} else {
					if (item.today) {
						 this.$emit('setDateInfo',item);
					}
				}
				week.push(item);
				
				if (week.length == 7) {
					this.Month.push(week);
					week = [];
				}
			}
			if (monthTail != 7) {
				for (let count = 1; count <= 7; count++) {
					if (monthTail > 0) {
						week.push({
							order: {},
							date: '',
							currentMonth: false
						});
						monthTail--;
						if (week.length == 7) {
							this.Month.push(week);
							week = [];
						}
					} else {
						break;
					}
				}
			}
			console.log('Month', this.Month);
		},
		// 渲染日期之间的天数格子
		include(val) {
			// if (this.time.length == 2 && val != '') {
			// 	let date = new Date(this.year + '/' + this.month + '/' + val);
			// 	return date > this.time[0] && date < this.time[1];
			// }
			return false;
		}
	}
};
</script>

<style lang="scss" scoped>
.work-calendar {
	width: 100%;
	.date-change {
		// width: 670rpx;
		padding: 0 10rpx;
		height: 68rpx;
		background: #f5fbff;
		font-size: 28rpx;
		color: #0091ff;

		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.date {
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			.tag {
				color: #0091ff;
				font-size: 20rpx;
				background: #d0ebfd;
				border-radius: 4rpx;
				margin-left: 8rpx;
				padding: 2rpx 8rpx;
				font-weight: normal;
			}
		}
	}

	&-content {
		width: 100%;
		.weeks {
			display: flex;
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: 14rpx;
			&-item {
				color: #999999;
				font-size: 28rpx;
				text-align: center;
				flex: 1;
			}
		}
		.month {
			width: 100%;
			display: flex;
			margin-top: -1;
		}
		.month:first-child {
			margin: 0;
		}
		.day {
			flex: 1;
			color: #666666;
			text-align: center;
			border: 1rpx solid #e9e9e9;
			margin-left: -1rpx;
			height: 122rpx;
			display: flex;
			flex-direction: column;
			z-index: 9;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			&-info {
				padding: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
				height: 36rpx;
				width: calc(100% - 20rpx);
				padding-bottom: 0;
				.day-num {
					width: 36rpx;
					height: 36rpx;
					// background: #fff;
					border-radius: 50%;
					position: relative;
					.text {
						color: #666;
						font-size: 22rpx;
						text-align: center;
						width: 36rpx;
						height: 36rpx;
						line-height: 37rpx;
					}
				}
				.act-num {
					width: 36rpx;
					height: 36rpx;
					background: #333333;
					border-radius: 50%;
					position: relative;
					.text {
						color: #fff;
						font-size: 22rpx;
						text-align: center;
						width: 36rpx;
						height: 36rpx;
						line-height: 37rpx;
					}
				}
				.rest {
					color: #fa6400;
					font-size: 22rpx;
				}
			}
		}
		.day:first-child {
			margin: 0;
		}
		.selected {
			background-color: #eef8ff;
		}
		.day-include {
			flex: 1;
			text-align: center;
		}
		.tag {
			// width: calc(100% - 20rpx);
			width: 80rpx;
			margin: 0 auto;
			text-align: center;
			padding: 3rpx 0rpx;
			font-size: 20rpx;
			border-radius: 8rpx;
			line-height: 20rpx;
		}
		.err {
			color: #e02020;
			background: #ffe6e6;
		}
		.info {
			background: #e9e9e9;
			color: #999999;
		}

		.count {
			width: calc(100% - 20rpx);
			margin: 0 auto;
			text-align: right;
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			color: #0091ff;
			text {
				font-size: 22rpx;
				font-weight: normal;
			}
		}
	}
}
</style>
